<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .b1
    {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .b2
    {
        height: 200px;
        background-color: yellow;
    }
    </style>
    <script type="text/javascript">
    window.onload=function()
    {
        //获取btn01
        var btn01=document.getElementById("btn01");
        //获取box
        var box=document.getElementById("box");

        //为btn01绑定单击响应函数
        btn01.onclick=function()
        {
            //修改box的样式
            //这种方式的性能是比较差的，而且这种形式需要很多的代码，修改不方便
            //box.style.width=200+"px";
            //box.style.heigh=200+"px";
            //box.style.backgroundColor="yellow";

            //如果通过修改class对应的样式，那么就可以很快的修改
            //可以通过修改元素的class属性来间接的修改样式
            //这样只需要修改一次，就可以同时修改多个样式
            //浏览器只需要重新渲染页面一次，性能比较好，并且这种方式可以使表现和行为进一步的分离
            //假设只想修改高度，不想修改宽度，那么只需要用box.className +=" b2";这个语法即可
            //box.className="b2";
            //box.className +=" b2";
            //addClass(box,"b2");//但是这个方法不停地点击后，class的字符串会出现不停地叠加
            //alert(hasClass(box,"b2"));判定class里面是否有b2
            //removeClass(box,"b2");//移除class中指定的字符串b2
            toggleClass(box,"b2");
        };

        //定义一个函数，用来向一个元素中添加指定的class属性值
        //obj 指要添加的class属性的元素
        //cn 要添加的class值
        function addClass(obj,cn)
        {
            obj.className += " "+cn;
        }

        //判断一个元素中是否含有指定的class
        function hasClass(obj,cn)
        {
            //判断obj中有没有cn class
            //创建一个正则表达式来进行判断
            var reg=new RegExp("\\b"+cn+"\\b");
            //alert("\\b"+reg+"\\b");
            return reg.test(obj.className);
        }

        //删除一个元素中的指定的class
        function removeClass(obj,cn)
        {
            //创建一个正则表达式来进行判断
            var reg=new RegExp("\\b"+cn+"\\b");
            //删除class
            obj.className=obj.className.replace(reg,"");//用空串替换正则表达式中指定的字符
        }

        //切换一个类
        //如果元素中具有该类，则删除
        //如果元素中没有该类，则添加
        function toggleClass(obj,cn)
        {
            //判断obj中是否含有cn
            if(hasClass(obj,cn))
            {
                //如果有，则删除
                removeClass(obj,cn);
            }
            //如果没有，则添加
            else
            {
                addClass(obj,cn);
            }
        }
    };
    </script>
</head>
<body>
    <button id="btn01">点击按钮以后修改box的样式</button>
    <br><br>
    <div id="box" class="b1 b2"></div>
</body>
</html>